<template>
	<uni-popup ref="popup" :is-mask-click="false">
		<view class="relative">
			<image class="absolute size-32" style="right:0;top:-44px;" src="@/static/svg/icon-close.svg" @click="onClose"></image>
			<view class="radius-12 bg-default px-16 py-24" style="width:calc(100vw - 48px);">
				<view class="text-color-regular text-center fs-16 font-medium mb-20"><text>联系客服</text></view>
				<view v-if="activeMobile" class="flex justify-between item-center px-16 py-12 radius-8 bg-white text-color-regular fs-14 font-normal mb-20">
					<text>联系电话：{{activeMobile}}</text>
					<view class="inline-flex center px-8 py-4 radius-4 border-secondary-success color-secondary-success fs-12 font-normal" @click="call(activeMobile)">
						<image class="size-16 mr-4" src="@/static/svg/activity/icon-call.svg"></image>
						<text>拨打</text>
					</view>
				</view>
				<view v-if="activeWechat" class="flex justify-between item-center px-16 py-12 radius-8 bg-white text-color-regular fs-14 font-normal">
					<text>客服微信号：{{activeWechat}}</text>
					<view class="inline-flex center px-8 py-4 radius-4 border-secondary-info color-secondary-info fs-12 font-normal" @click="copy(activeWechat)">
						<image class="size-16 mr-4" src="@/static/svg/activity/icon-copy.svg"></image>
						<text>复制</text>
					</view>
				</view>
				<view v-if="activeQrcode" class="flex flex-col center text-color-regular fs-14 font-normal mt-20">
					<image class="bg-white radius-12 mb-8" style="width:120px;height:120px;" :src="activeQrcode"></image>
					<text>长按识别添加客服</text>
				</view>
				<view v-if="!(activeMobile || activeWechat || activeQrcode)" class="flex center">
					<text>无</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup name="ServiceDialog">
	import { ref } from 'vue'
	import { getCustomInfoApi } from '@/api/activity.js'
	
	const props = defineProps({
		phoneNumber: {
			type: String
		},
		weixin: {
			type: String
		}
	})
	const goodsInfo = ref(null)
	const activeMobile = ref(props.phoneNumber)
	const activeWechat = ref(props.weixin)
	const activeQrcode = ref(null)
	
	const popup = ref(null)
	
	const onClose = () => {
		popup.value && popup.value.close()
	}

	const showDialog = async (value, goods) => {
		if (value) {
			goodsInfo.value = goods
			if (goods && goods.merchantId) {
				await getCustomInfo(goods.merchantId)
			}
			popup.value && popup.value.open()
		} else {
			popup.value && popup.value.close()
		}
	}
	
	const call = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber,
			success: () => {
				showDialog(false)
			},
			fail: () => {
				showDialog(false)
			}
		})
	}
	
	const copy = (text) => {
		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
				showDialog(false)
			},
			fail: () => {
				showDialog(false)
			}
		})
	}
	
	const getCustomInfo = (merchantId) => {
		getCustomInfoApi(merchantId).then(res => {
			if (res) {
				activeMobile.value = res.customerMobile
				activeWechat.value = res.customerWechat
				activeQrcode.value = res.customerWechatUrl
			}
		})
	}
	
	defineExpose({
		showDialog
	})
</script>
